<html>    
    <head>
 <?php
 header("Access-Control-Allow-Origin: *");
?>
    <title>WebSocket Client</title>
<script src="http://192.168.1.16:8001/socket.io/socket.io.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
	var socket = io.connect('http://192.168.1.16',{port:8001});
var owneruser = null;
	// on connection to server, ask for user's name with an anonymous callback
	socket.on('connect', function(){
		// call the server-side function 'adduser' and send one parameter (value of prompt)
		
		owneruser =prompt("What's your name?");
		console.log(window.location.hostname);
		socket.emit('adduser', owneruser,window.location.hostname);
	});

	// listener, whenever the server emits 'updatechat', this updates the chat body
	socket.on('updatechat', function (username, data) {
		$('#conversation').append('<b>'+username + ':</b> ' + data + '<br>');
	});
	
	socket.on('updateimage', function (username, data) {
		//alert(username +':'+ data);
		var imagediv =  '<li id="'+username+'">' + username + '<br/><img width="128px" height="128px" src="'+data+'"/>' +'</li>';
		if(username!=owneruser)
		{
		  if($('#'+username).length==0)
		  {
		  var html = $('#img-view').html() +imagediv;
			$('#img-view').html(html);
		  }
		  else
		  {
		  $('#'+username).html(username + '<br/><img width="128px" height="128px" src="'+data+'"/>');
		  }
		}
	});

	// listener, whenever the server emits 'updateusers', this updates the username list
	socket.on('updateusers', function(data) {
		$('#users').empty();
		$.each(data, function(key, value) {
		console.log(key);
			$('#users').append('<div>' + key + '</div>');
		});
	});
	
	socket.on('updateimageall', function(data) {
		$('#img-view').empty();
		
		$.each(data, function(key, value) {
		if(key!=owneruser)
		{
		console.dir(data);
			var imagediv =  '<li id="'+key+'">' + key + '<br/><img width="128px" height="128px" src="'+value+'"/>' +'</li>';
		 var html = $('#img-view').html() +imagediv;
			$('#img-view').html(html);
		}
		else if(key==owneruser)
		{
			var imagediv =  '<li id="you">you' + '<br/><img width="128px" height="128px" src="'+value+'"/>' +'</li>';
		 var html =imagediv+ $('#img-view').html() ;
			$('#img-view').html(html);
		}
		
		
		});
		
		if(data[owneruser]===undefined)
		{
			var imagediv =  '<li id="you">' + '</li>';
			var html =imagediv+ $('#img-view').html() ;
			$('#img-view').html(html);
		}
	});

	// on load of page
	$(function(){
		// when the client clicks SEND
		$('#datasend').click( function() {
			var message = $('#data').val();
			$('#data').val('');
			// tell server to execute 'sendchat' and send along one parameter
			socket.emit('sendchat', message);
		});

		// when the client hits ENTER on their keyboard
		$('#data').keypress(function(e) {
			if(e.which == 13) {
				$(this).blur();
				$('#datasend').focus().click();
			}
		});
		
		$('#image img').click(function(){
		var srcimg = $(this).attr('src');
		var hmtl = 'you <br/><img width="128px" height="128px" src="'+srcimg+'"/>';
		$('#you').html(hmtl);
		var start = srcimg.indexOf('/')
		var img_name = srcimg.substring(start+1);
		socket.emit('sendchat', img_name);
		socket.emit('changeimage',srcimg);
		});
	});
	
	function autoSelectImg(){
	var index=	Math.floor((Math.random()*4));
	$('#image img:nth-child(' + index + ')').click();
	}
	
	function clearConversation()
	{
	$('#conversation').empty();
	}
	setInterval(autoSelectImg,3000);
	setInterval(clearConversation,60000);
	

</script>
<style>
ul{
display:inline;

}
ul li{
width:130px;
height:160px;
float:left;
list-style-type:none;
}
#img-view0{
width:65%;
float:right;

.user{float:left;width:20%;border-right:1px solid black;height:300px;padding:10px;overflow:scroll-y;}
}
</style>
</head>
<body>

<div class="user">
	<b>USERS</b>
	<div id="users"></div>
</div>
<div style="float:right;width:75%">
	<div style="float:left;width:30%;overflow:scroll-y;padding:10px;">
		<div id="conversation" style='float:left;'></div>
		<input id="data" style="width:30%;" />
		<input type="button" id="datasend" value="send" />
	</div>
	<div id='img-view0' >
	<ul id='img-view' >

<li id='you'></li>
</ul>
<div>
</div>


</body>
</html>
